// 导入：类型、接口、模块、组件、样式
import { Component } from "react";

import * as echarts from "echarts";

interface Props {}
interface State {}
class Index extends Component<Props, State> {
  state = {
    talks: [],
  };

  // 弃用1 16.8
  UNSAFE_componentWillMount() {
    console.log("componentWillMount");
  }

  render() {
    console.log("render");
    return (
      <fieldset>
        <legend>19-生命周期：挂载</legend>

        <div id="main" style={{ width: "900px", height: "340px" }}></div>

        <ul
          ref="talks"
          style={{
            width: "500px",
            height: "100px",
            background: "black",
            overflow: "scroll",
          }}
        >
          {this.state.talks.map((item, i) => {
            return (
              <li
                style={{
                  width: "400px",
                  height: "50px",
                  background: "green",
                  overflow: "scroll",
                }}
                key={i}
              >
                {item}
              </li>
            );
          })}
        </ul>
      </fieldset>
    );
  }

  myChart = () => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));

    // 指定图表的配置项和数据
    var option = {
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      legend: {
        data: ["销量"],
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  };

  // 异步请求、DOM操作
  componentDidMount() {
    console.log("componentDidMount");

    // swiper轮播图   下模块导入、固定结构、实例化
    // 图表 下模块导入、固定结构、实例化
    this.myChart();

    // 请求接口
    this.setState(
      {
        talks: ["抽烟", "喝酒", "到处烫"],
      },
      () => {
        console.log(this.refs.talks);
        (this.refs.talks as HTMLUListElement).scrollTop =
          this.state.talks.length * 50 - 100;
      }
    );
  }
}
export default Index;
